<template>
  <el-form ref="alipayFormRef" label-width="110px" :model="alipayFormData" :rules="alipayFormRules">
    <el-row>
      <el-col :span="9">
        <el-form-item label="支付宝订单号" prop="acqTradeNo">
          <el-input v-model="alipayFormData.acqTradeNo" clearable placeholder="请输入支付宝订单号">
            <el-button slot="append" icon="el-icon-search" @click="queryAlipay">查询</el-button>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="15">
        <h2 v-show="isQueryMsg">{{queryMsg}}</h2>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="9">
        <el-form-item label="下游订单号" prop="outTradeNo">
          <el-input v-model="alipayFormData.outTradeNo" placeholder="请输入下游订单号"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="15">
        <h2 v-show="isSupOrderMsg">{{queryResultMsg}}</h2>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="9">
        <el-form-item label="验证码" prop="vcode">
          <el-input v-model="alipayFormData.vcode" placeholder="请输入验证码">
            <el-button slot="append" icon="el-icon-circle-check" @click="PostOrder">补单</el-button>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { queryAlipayOrder, supOrder } from 'network/fill'
export default {
  data() {
    return {
      //表单数据对象
      alipayFormData: {
        acqTradeNo: '',
        vcode: '',
        outTradeNo: '',
        channelType: '10'
      },
      //是否显示响应的信息
      isQueryMsg: false,
      queryMsg: '',
      isSupOrderMsg: false,
      queryResultMsg: '',
      //表单验证对象
      alipayFormRules: {
        acqTradeNo: [
          { required: true, message: '请输入支付宝订单号', trigger: 'blur' }
        ],
        vcode: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 6, max: 6, message: '长度为6个字符', trigger: 'blur' }
        ],
        outTradeNo: [
          { required: true, message: '请输入支付宝订单号', trigger: 'blur' }
        ]
      }
    }
  },
  props: {
    addAlipayNum: ''
  },
  watch: {
    addAlipayNum(val) {
      this.alipayFormData.acqTradeNo = val
      this.queryAlipay()
    }
  },
  computed: {},
  methods: {
    //订单查询
    async queryAlipay() {
      const res = await queryAlipayOrder(this.alipayFormData.acqTradeNo)
      if (res.status == 'y') {
        this.isQueryMsg = true
        this.queryMsg = res.data.msg
      } else {
        this.$message.error('查询订单失败')
      }
    },
    //支付宝补单
    PostOrder() {
      this.$refs.alipayFormRef.validate(async valid => {
        if (!valid) return
        const res = await supOrder(this.alipayFormData)

        if (res.status == 'y') {
          this.$message.success('补单成功')

          //重置表单
          this.isSupOrderMsg = false
          this.isQueryMsg = false
          this.$refs.alipayFormRef.resetFields()
        } else {
          this.isSupOrderMsg = true
          this.queryResultMsg = res.message
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-col h2 {
  color: red;
  padding-left: 20px;
  line-height: 38px;
}
</style>